import React from 'react';
import { MaterialIcons } from 'taro-icons';
import { View, Text } from '@tarojs/components';

import './dataError.scss';

/**
 * 数据加载中组件
 * @returns {JSX.Element} 渲染的数据加载中组件
 */
export const DataErrorView: React.FC<{
    title?: string,
    content?: string,
    buttonText?: string,
    onClickFunc?: () => void
}> = ({
    content = '',
    title = '出错啦~',
    buttonText = '重新加载',
    onClickFunc = null,
}) => {
    return (
        <View className="data-error-container">
            <View className="data-error-icon">
                <MaterialIcons name="bug-report" color="#ff4d4f" size={32} />
            </View>
            <View className="data-error-header">
                <Text className="data-error-title">{title}</Text>
                { buttonText && onClickFunc && (
                    <Text className="data-error-button" onClick={() => onClickFunc?.()}>{buttonText}</Text>
                )}
            </View>
            <View className="data-error-content">
                <Text>{content}</Text>
            </View>
        </View>
    );
};

export default DataErrorView;
